﻿<div style="width: 24px; height: 24px; @CssStyle"
     class="transition-colors @(IsChecked ? "bg-accent1-600" : "bg-dark hover:bg-grey-800") border rounded-full @(IsChecked ? "border-accent1-200" : "border-grey-700") cursor-pointer text-center select-none"
     @onclick:stopPropagation="true"
     @onclick="Toggle">
    <span class="material-icons-outlined text-accent1-100 text-sm @(IsChecked ? "" : "hidden")">check</span>
</div>

@code
{
    [Parameter]
    public bool IsChecked { get; set; }

    [Parameter]
    public Action<bool> OnChange { get; set; }

    [Parameter]
    public string CssStyle { get; set; }

    private void Toggle()
    {
        IsChecked = !IsChecked;
        OnChange(IsChecked);
    }
}